<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>富豪榜练习</title>
  
    <style>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}

header{
    background-color: skyblue;
    text-align: center;
    width: 100%;
    position: relative;
    padding:40px 20px;
    color: white;
}

#toggle{
    background-color: white;
    position: absolute;
    left: 20px;
    top: 20px;
    border-radius: 5px;
    cursor: pointer;
}

#login{
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    padding: 15px 30px;
}

button:focus{
    outline: none;
    /* 去除点击时候，边框样式 */
}

nav{
    background-color: pink;
    color:white;
    width: 200px;
    height: 100vh;
    position:fixed;
    left: 0;
    top: 0;
    /* z-index: 100; */
    transform: translate(-100%);
}

body{
    transition: transform 0.5s ease;
}

.show_nav{
    transform: translate(200px);
}

.container{
    width: 800px;
    margin: 0 auto;
    display: flex;
   justify-content: center;
   align-items: flex-start;
   padding: 20px;
}

.container aside{
    padding: 10px 20px;
    width: 250px;
    border-right: 1px solid black;
}

.container button{
    cursor: pointer;
    background-color: white;
    border-radius: 5px;
    display: block;
    width: 100%;
    padding: 10px;
    font-weight: bold;
    font-size: 15px;
    margin:20px ;
}

.container main{
    flex:1;
    /* 自动填充复元素剩余的宽度 */
    padding: 10px 15px;
}

.container h2{
   display: flex;
   justify-content: space-between;
   font-size: 18px;
}

.container .person{
    display: flex;
    justify-content: space-between;
    margin: 10px;
    font-size: 18px;
}

    </style>
</head>
<body>
          <!-- 导航栏 -->
          <nav>
            <ul>
              <li>主页</li>
              <li>排行榜</li>
              <li>联系方式</li>
            </ul>
          </nav>
          <!-- 头部内容 -->
          <div class="box">
                <header>
            <!-- 导航栏的按钮 -->
            <button id="toggle">导航栏</button>
            <!-- 标题 -->
            <h2>欢迎来到富豪排行榜</h2>
            <!-- 欢迎语句 -->
            <p>weclome to the rich rank</p>
            <!-- 登陆按钮 -->
            <!-- <button id="login">登陆</button> -->
          </header>
          <!-- 主题内容 -->
          <div class="container">
            <!-- 左盒子 -->
                <aside>
                    <!-- 五个按钮 -->
                    <button id="add-user">添加账户</button>
                    <button id="double">资金翻倍</button>
                    <button id="show-millionaire">查询百万富翁</button>
                    <button id="sort">财富榜</button>
                    <button id="calculate">计算总额</button>
                </aside>
            <!-- 右盒子 -->
                <main id="main">
                      <h2>
                        <strong>Person</strong>  
                        <span>Wealth</span>
                      </h2>
                </main>
          </div>
          </div>
          <script>
   let data = [
        { name: "English chan", money: 392001 },
        { name: "alex chan", money: 568932 },
        { name: "melon chan", money: 698756 },
        { name: "Clare Langner", money: 292489 },
        { name: "Abigail Rice", money: 953957 },
        { name: "Clarice Dias", money: 168472 },
        { name: "Vernon Lucas", money: 718225 },
        { name: "Nina Schmidt", money: 889147 },
      ];
          //获取元素
    let addUser = document.querySelector('#add-user')
    let double = document.querySelector('#double')
    let showMillionaire = document.querySelector('#show-millionaire')
    let sort = document.querySelector('#sort')
    let calculate = document.querySelector('#calculate')
    let main = document.querySelector('#main')

    // 事件监听
    addUser.addEventListener('click',addUserFn)
    double.addEventListener('click',doubleFn)
    showMillionaire.addEventListener('click',showMillionaireFn)
    sort.addEventListener('click',sortFn)
    calculate.addEventListener('click',calculateFn)
     

    let renderData = []  //专门渲染数据的 接受新的数组
    let num = -1;  // 计数器 点击次数
    //-----------函数封装-----------------
    // 添加账户
    function addUserFn() {
    num++;
    if (num == data.length) {
        return;
    }
    renderData.push(data[num])
      updateDom(renderData)
    }
    // 资金翻倍
    function doubleFn() {
        renderData.forEach(function (item) {
        item.money *= 2
        })
        updateDom(renderData)
    }
    // 查询百万
    function showMillionaireFn() {
        // 判断money大于百万的用户
     renderData= renderData.filter(function (item) {
         return item.money>1000000
     })   
     updateDom(renderData)
    }
    // 排序
    function sortFn() {
     renderData.sort(function (a,b) {
         return b.money - a.money 
     })   
    updateDom(renderData)
    }
    // 计算总额
    function calculateFn() {
    // 处理数据
     let total = renderData.reduce(function (sum,item) { // sun不用声明
         return sum +=item.money
     },0)   
     console.log(total);
   // 渲染数据
   // 创建div
   let div =document.createElement('div')
   // 给这个div 上数据
   div.innerHTML = `<span>总金额:</span>${total}`
   // 把这个div挂树上
   main.appendChild(div)

    }     
    // 渲染页面
    function updateDom(providData) {
    main.innerHTML = `<h2>
                        <strong>Person</strong>  
                        <span>Wealth</span>
                      </h2> `     
    providData.forEach(function (item) {
        
        let div = document.createElement('div')
        // 2.新增一个属性person+文本(结构+数据) *****
        div.classList.add('person')
        div.innerHTML = `  
                        <strong>${item.name}</strong>  
                        <span>${formatMoney(item.money)}</span>
                       `
        main.appendChild(div)
    })
    }
    //  转换金钱的输出格式
    function formatMoney(money) {
      return '$'+toThousand(money)+ '.00'
    }
    // 封装一个金钱格式的函数
    function toThousand(money) {
        let str = money
        // 1.number =>字符转换成数组
        // ['1','2','3','4','5','6']
       let strArr = money.toString().split('')
       console.log(strArr);
       // 接受数据
       let arr = []
       let count = 0 // 计数
       for(let i= strArr.length-1 ; i>=0 ;i--){
         count++
         console.log(strArr[i]);
         arr.unshift(strArr[i])
         if (count %3==0 && i!=0) {
           arr.unshift(',')
         }
       }
       console.log(arr);
       str = arr.join('')
       // ['1','2','3','4','5','6']
        return str
      }




          </script>
</body>
</html>